<template>
  <div>
    <div
      class="card"
      v-for="(item, index) in tableData"
      :key="index"
    >
      <div class="TopBox">
        <div class="LeftBox">
          <div class="mess1">
            <div class="mess2">策略名称</div>
            <div class="mess3" style="color: #fe0030">
              {{ item.algo_name }}
            </div>
          </div>
          <div class="mess1">
            <div class="mess2">交易次数</div>
            <div class="mess3" style="color: #fe0030">
              {{ item.trans_count }}
            </div>
          </div>
          <div class="mess1">
            <div class="mess2">区间胜率</div>
            <div class="mess3" style="color: red">
              {{ item.wined_percent }}
            </div>
          </div>
          <div class="mess1">
            <div class="mess2">区间收益率</div>
            <div class="mess3" style="color: yellow">
              {{ item.gained_percent }}
            </div>
          </div>
          <div class="mess1">
            <div class="mess2">最大回撤</div>
            <div class="mess3" style="color: yellow">
              {{ item.max_drawback_ratio }}
            </div>
          </div>
        </div>
        <div class="RightBox">
           <div class="mess1">
            <div class="mess2">综合评分</div>
            <div class="mess3" style="color: yellow">
              {{ item.score }}
            </div>
          </div>
          <div class="mess1">
            <div class="mess4">策略周期</div>
            <div class="mess5">{{ item.period_type }}</div>
          </div>
          <div class="mess1">
            <div class="mess4">起始日期</div>
            <div class="mess5">{{ (item.begin_time*1000) | dateFormat }}</div>
          </div>
                    <div class="mess1">
            <div class="mess4">结束时间</div>
            <div class="mess5">{{ (item.end_time*1000) | dateFormat }}</div>
          </div>
                    <div class="mess1">
            <div class="mess4">创建时间</div>
            <div class="mess5">{{ (item.created_time*1000) | dateFormat }}</div>
          </div>
        </div>
      </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
    }
  },
  computed: {
    tableData() {
      return this.$store.state.data4
    }
  }
}
</script>
<style Lang="less" scoped>
.box {
  display: flex;
  flex-direction: column;
  background-color: #0e0c22;
}
.title {
  color: #00ffff;
  margin: 5px auto 5px auto;
  font-size: 22px;
}
.card {
  margin: 30px 15px 0px 15px;
  background-color: #201e33;
  color: #ffffff;
  font-family: PingFang SC;
  margin-top: 0;
  margin-bottom: 10px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}
.TopBox {
  display: flex;
  flex-direction: row;
}
.LeftBox {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  flex: 1;
}
.RightBox {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  flex: 1;
}
.mess1 {
  display: flex;
  flex-direction: row;
}
.mess2 {
  letter-spacing: 2px;
  font-size: 13px;
  font-family: PingFang-SC-Regular;
  margin: 6px 0 6px 10px;
  flex: 1;
}
.mess3 {
  font-size: 13px;
  margin: 6px -10px 6px 2px;
  flex: 1.2;
  display: flex;
  flex-direction: row;
}
.mess4 {
  letter-spacing: 2px;
  font-size: 13px;
  margin: 6px 0 6px 10px;
  flex: 1.5;
}
.mess5 {
  font-size: 13px;
  margin: 6px 0px 6px 2px;
  flex: 1;
  display: flex;
  flex-direction: row;
}
</style>
